<template>
  <div id="app">
       <div class="detail">
         <div  class="viewBox">
            <div class="title">合同基本信息</div>
            <div class="content">
                <h4 class="sub_title">{{detailData.STAFF_NAME}} {{detailData.STAFF_NO}}</h4>
                <div>
                    <ul>
                      <li><span>合同编号</span><span class="desc">{{detailData.CONTRACT_NO}}</span></li>
                      <li><span>合同类别</span><span class="desc">{{detailData.CONTRACT_CLASS_NO&&detailData.CONTRACT_CLASS_NO=="XXX"?"主签合同":"附属合同"}}</span></li>
                      <li><span>合同类型</span><span class="desc">{{detailData.ITEM_NAME}}</span></li>
                      <li><span>签订日期</span><span class="desc">{{detailData.FROM_DATE}}</span></li>
                      <li><span>起止日期</span><span class="desc">{{detailData.EFFECTIVE_DATE}} 至 {{detailData.INVALID_DATE}}</span></li>
                      <li><span>合同主体</span><span class="desc">{{detailData.BELONGED_NAME}}</span></li>
                    </ul>
                </div>
            </div>
            <div class="title">签章详情</div>
            <div class="content">
                 <div class="stepBox">
                     <div class="stepItem" :class="{end:item.HANDER_STATUS==4}" v-for="(item,index) in detailData.ITEMS" :key="index">
                          <div class="tagBox"></div>
                          <div class="content">
                             <div class="title">{{item.ITEM_NAME}}</div>
                             <div class="desc" v-if="item.USER_NAME">{{item.USER_NAME}} {{item.SIGN_DATE}}</div>
                             <div class="desc" v-if="item.DIS_REASON">备注：{{item.DIS_REASON}}</div>
                             <div class="desc" v-if="item.SIGN_REMARK">原因：{{item.SIGN_REMARK}}</div>
<!--                             <div class="status" :style="{color:Dict[item.HANDER_STATUS]}" >{{item.PROCESS_STATUS}}</div>-->
                            <div class="status" v-on:[event]="reloadData" :style="{color:Dict[item.HANDER_STATUS]}">
                              <svg v-if="(item.HANDER_STATUS==2||item.HANDER_STATUS==1)&&index==(detailData.ITEMS.filter((i)=>{return i.HANDER_STATUS=='2'}).length>=2?(detailData.ITEMS.length-2):(detailData.ITEMS.length-1))&&referrer" t="1630575070586" class="icon reload" :class="{loading:svgload}" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4154" data-spm-anchor-id="a313x.7781069.0.i6" width="20" height="20"><path d="M508.461 73.684c-238.862 0-432.5 193.637-432.5 432.501 0 238.863 193.638 432.499 432.5 432.499 238.863 0 432.502-193.636 432.502-432.499 0-238.865-193.639-432.501-432.502-432.501z m229.028 456.819C723.89 646.585 625.387 734.12 508.363 734.12c-61.627 0-119.565-23.998-163.143-67.575-43.577-43.576-67.576-101.516-67.576-163.142 0-61.627 23.999-119.566 67.576-163.143 38.339-38.339 87.796-61.515 141.1-66.534V227.64c0-21.183 13.954-28.234 31.008-15.67l76.203 56.135c17.052 12.564 17.052 33.122 0 45.685l-76.203 56.137c-17.055 12.564-31.008 5.511-31.008-15.671v-35.159c-91.999 10.936-163.579 89.413-163.579 184.306 0 102.351 83.27 185.62 185.621 185.62 94.15 0 173.396-70.404 184.335-163.768 1.448-12.368 12.658-21.223 25.02-19.771 12.369 1.448 21.221 12.649 19.772 25.019z" fill="#ff9800" p-id="4155" data-spm-anchor-id="a313x.7781069.0.i0" class=""></path></svg>
                              {{item.PROCESS_STATUS}}
                            </div>
                          </div>
                      </div>
                   
                 </div>
            </div>
         </div>
       </div>
       <div class="footerBar">
            <div class="actions">
                <div class="action" @click="scrapContract" v-if="(detailData.CON_SIG_STATUS!=='END'&&detailData.CON_SIG_STATUS!=='DIS'&&detailData.CON_SIG_STATUS!=='EMP')&&parseQuery.type=='C'">废弃</div>
                <a v-if="detailData.CON_SIG_STATUS=='END'" style="color:#222" download class="action" @click="show=true">下载</a>
                <div class="action" v-fileView="fileUrl" :taskId="taskId">预览</div>
                <div class="action" v-if="['COM'].includes(detailData.CON_SIG_STATUS)&&parseQuery.type=='C'" @click="rejectSing">拒签</div>
                <div class="action" v-if="['EMP'].includes(detailData.CON_SIG_STATUS)&&parseQuery.type=='P'" @click="rejectSing">拒签</div>
                <div class="action active" @click="singContract()" v-if="['COM'].includes(detailData.CON_SIG_STATUS)&&parseQuery.type=='C'">签章</div>
                <div class="action active" @click="singContract()" v-if="['EMP'].includes(detailData.CON_SIG_STATUS)&&parseQuery.type=='P'">签章</div>
            </div>
            <!-- <div class="iphonexBottomHeight"></div> -->
       </div>
       <!-- <div class="iphonexBottomHeight"></div> -->
    <van-popup v-model="show" get-container="body" closeable round  class="mypopup" :close-on-click-overlay="false">
      <div class="title">复制下载链接到浏览器中访问</div>
      <div  class="popupBox">
        {{downLoadLink}}（请勿告知他人）
      </div>
      <div class="actions">
        <span v-copy="downLoadLink" @click="show=false">复制</span>
      </div>
    </van-popup>
  </div>
</template>

<script>
const Dict ={
      "BEG":["创建","#66c142"],
      "COM":["待公司签章","#f3a640"],
      "EMP":["待签章","#f3a640"],
      "END":["已结束","#66c142"],
      "DIS":["废弃","#c9c9c9"],
      "0":"#66c142", /*创建*/
      "1":"#66c142", /*已签章*/
      "2":"#f3a640", /**未签章 */
      "3":"#c9c9c9", /**已废弃 */
      "4":"#66c142", /** 已结束 */
      "5":"#c9c9c9" /**拒签**/
};
const nameDict = {
    "0":"创建",
    "1":"公司签章",
    "2":"员工签章",
    "3":"结束",
}
import "@/lib/vgui-dialog.css"
import "@/lib/vgui-dialog.js"
import vm from 'vue';
import "./less/style.less";
import { Popup} from 'vant';
import Vcopy from "@/directives/copy"
let obData=vm.observable({
      title:"",
      gobackPath:""
})
import mymixin from "@/mixins/pageMethds.js";
export default {
  name:"App",
  mixins:[mymixin],
  components:{
    [Popup.name]:Popup,
    // [Sticky.name]:Sticky
  },
  directives:{
    copy:Vcopy
  },
  provide() {
    return {
      obData: obData
    };
  },
  data(){
    const fileUrl = `${window.location.protocol+"//"+window.location.host}/FilePreview/onlinePreviewFromStreamUseCache?url=${window.location.protocol+"//"+window.location.host}/electronic/attachmentshow/${window.parseQuery.taskId}?file_name=${window.parseQuery.taskId+ window.parseQuery.type}.pdf`;
    return {
      show:false,
      downLoadLink:`${window.location.protocol+"//"+window.location.host}/electronic/download/${window.parseQuery.taskId}`,
      fileUrl:fileUrl,
      storeData:window.storeData,
      parseQuery:Object.freeze(window.parseQuery),
      dev:process.env.NODE_ENV.indexOf("dev")>-1,
      taskId:window.parseQuery.taskId,
      fixed:false,
      detailData:{},
      Dict:Object.freeze(Dict),
      nameDict:Object.freeze(nameDict)
    }
  },
 
  mounted(){
    if(window.parseQuery.redirect=="true"){
      this.$toast.loading({
        message: '加载中...',
        forbidClick: true,
        loadingType: 'spinner',
        duration:0,
      });
      setTimeout(()=>{
        this.$toast.clear(true);
        this.getData();
        document.getElementById("reload_loading").parentNode.removeChild(document.getElementById("reload_loading"));
      },1500);
    }else{
      this.getData();
      document.getElementById("reload_loading").parentNode.removeChild(document.getElementById("reload_loading"));
    }
  },
  methods:{
    rejectSing(){
      /**拒签操作**/
      let _that=this;
      vgui.PushDialog.prompt("拒签原因",null,function(val){
        if(val.trim()==""){
          _that.$toast({
            message:"请填写拒签原因",
            position: 'bottom',
          });
          return false

        }
        $api.rejectSign({
          taskId:parseQuery.taskId,
          loginUserCode:storeData.staff_no,
          tenant_id:storeData.tenant_id,
          orderType:'contract',
          signType:parseQuery.type /**P OR C */,
          reason:val,
        }).then((res)=>{
          _that.getData();
        })


      })
    },
     /**废弃合同**/
     scrapContract(){
       let _that=this;
       vgui.PushDialog.prompt("废弃原因",null,function(val){
         $api.scrapContract({
           disReason:val,
           taskId:parseQuery.taskId,
           loginUserCode:storeData.staff_no,
           tenant_id:storeData.tenant_id,
           type:parseQuery.type /**P OR C */
         }).then(()=>{
           _that.getData();
         })

       })


     },
     singContract(){
       var _that =this;
       /**签章过程**/
         /**进行签章**/
                 $api.singContract({
                   taskId:parseQuery.taskId,
                   loginUserCode:storeData.staff_no,
                   tenant_id:storeData.tenant_id,
                   type:parseQuery.type /**P OR C */

                 }).then((res)=>{
                   if(res.result == true){
                     if(res.data){
                       return window.location.href = res.data;
                     }

                   }
                 })
      //  $api.singAuthor({
      //    tenant_id: sessionStorage.getItem("tenant_id"),
      //    loginUserCode: sessionStorage.getItem("staff_no"),
      //    userId: sessionStorage.getItem("ownid")
      //  }).then((res)=>{
      //    try {
      //      if (res.result == true) {
      //        if (res.data.status == false) {
      //          vgui.PushDialog.open({
      //            content: '<div><div class="alert_title"><svg t="1629363692957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7180" width="30" height="30"><path d="M512.3 746.1c-10.8 0-19.5-8.7-19.5-19.5v-58.4c0-10.8 8.7-19.5 19.5-19.5s19.5 8.7 19.5 19.5v58.4c0 10.8-8.7 19.5-19.5 19.5zM512.3 590.2c-10.8 0-19.5-8.7-19.5-19.5V239.6c0-10.8 8.7-19.5 19.5-19.5s19.5 8.7 19.5 19.5v331.2c0 10.7-8.7 19.4-19.5 19.4z" fill="#FF7878" p-id="7181"></path><path d="M512.3 103.2c225.6 0 409.1 183.5 409.1 409.1 0 225.6-183.5 409.1-409.1 409.1S103.2 737.9 103.2 512.3c0-225.6 183.5-409.1 409.1-409.1m0-39c-247.5 0-448.1 200.6-448.1 448.1 0 247.5 200.6 448.1 448.1 448.1 247.5 0 448.1-200.6 448.1-448.1 0-247.5-200.7-448.1-448.1-448.1z" fill="#FF7878" p-id="7182"></path></svg>提示</div>您还未进行实名认证和授权，为避免后续无法签章，请先进行实名认证和授权</div>',
      //            btn: ["忽略", "立即认证"],
      //            btnFun: [function() {

      //            }, function() {
      //               window.location.href = "../authPage/index.html";
      //            }]
      //          }, "confirm");
      //        } else {
      //          if (res.data.authorize == false) {
      //            vgui.PushDialog.open({
      //              content: '<div><div class="alert_title"><svg t="1629363692957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7180" width="30" height="30"><path d="M512.3 746.1c-10.8 0-19.5-8.7-19.5-19.5v-58.4c0-10.8 8.7-19.5 19.5-19.5s19.5 8.7 19.5 19.5v58.4c0 10.8-8.7 19.5-19.5 19.5zM512.3 590.2c-10.8 0-19.5-8.7-19.5-19.5V239.6c0-10.8 8.7-19.5 19.5-19.5s19.5 8.7 19.5 19.5v331.2c0 10.7-8.7 19.4-19.5 19.4z" fill="#FF7878" p-id="7181"></path><path d="M512.3 103.2c225.6 0 409.1 183.5 409.1 409.1 0 225.6-183.5 409.1-409.1 409.1S103.2 737.9 103.2 512.3c0-225.6 183.5-409.1 409.1-409.1m0-39c-247.5 0-448.1 200.6-448.1 448.1 0 247.5 200.6 448.1 448.1 448.1 247.5 0 448.1-200.6 448.1-448.1 0-247.5-200.7-448.1-448.1-448.1z" fill="#FF7878" p-id="7182"></path></svg>提示</div>您还未进行实名认证和授权，为避免后续无法签章，请先进行实名认证和授权</div>',
      //              btn: ["忽略", "立即授权"],
      //              btnFun: [function() {

      //              }, function() {
      //                 window.location.href = "../authPage/index.html";
      //              }]
      //            }, "confirm");
      //          }else{
      //            /**进行签章**/
      //            $api.singContract({
      //              taskId:parseQuery.taskId,
      //              loginUserCode:storeData.staff_no,
      //              tenant_id:storeData.tenant_id,
      //              type:parseQuery.type /**P OR C */

      //            }).then((res)=>{
      //              if(res.result == true){
      //                if(res.data){
      //                  return window.location.href = res.data;
      //                }

      //              }
      //            })
      //          }
      //        }
      //      }

      //    } catch (e) {
      //      vgui.PushDialog.alert("请求错误");
      //    }
      //  });

       /**签章过程end**/


        // $api.singContract({
        //     taskId:parseQuery.taskId,
        //     loginUserCode:storeData.staff_no,
        //     tenant_id:storeData.tenant_id,
        //     type:parseQuery.type
        // }).then(()=>{
        //     this.getData();
        // })


     },
     getData(){
          $api.getAuthorDetailContract({
            taskId:parseQuery.taskId,
            loginUserCode:storeData.staff_no,
            tenant_id:storeData.tenant_id,
            type:parseQuery.type
      }).then(res=>{
           this.detailData= res.data[0];
           
      })  
      
    }
  }
};
</script>
<style lang="less">
.mypopup{
  padding:20px;
  .title{
    margin-top:50px;
    font-size:30px;
  }
  .popupBox{
    width:600px;
    min-height:100px;
    word-break: break-all;
    font-size:22px;
    margin-top:20px;
    color:#585858;
  }
  .actions{
    text-align: right;
    font-size:30px;
    position:relative;
    right:30px;
    padding:10px;
    color:#3ab5ff;
    letter-spacing:2px;
  }
}
#app {
  padding: 0px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #222;
  padding-bottom:80px;
  .nav_bar{
    position:fixed;
    width:100%;
    top:0px;
    z-index:4;
  }
  transform: none; 
  .fixed{
     
      top: 46px;

  }
}
.slide-fade-enter-active{
  transition: all 0.6s ease;
}
.slide-fade-leave-active {
  transition: all 0.3s ease;
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
  transform: translateX(20px);
  opacity: 0;
}
</style>
